<template>
  <div>
    <div class="columns">
      <div class="column is-half">
        <div style="margin: 10px 5% 0px 5%">
          <columns>
            <div v-for="n in 5" :key="n">
              <column>
                <img
                  :src="'data:image/png;base64,' + images[0 + 5 * (n - 1)]"
                  alt=""
                  style="width: 15%"
                  @click="select(params[0 + 5 * (n - 1)],n,0)"
                />
              </column>
              <column>
                <img
                  :src="'data:image/png;base64,' + images[1 + 5 * (n - 1)]"
                  alt=""
                  style="width: 15%"
                  @click="select(params[1 + 5 * (n - 1)],n,1)"
                />
              </column>
              <column>
                <img
                  :src="'data:image/png;base64,' + images[2 + 5 * (n - 1)]"
                  alt=""
                  style="width: 15%"
                  @click="select(params[2 + 5 * (n - 1)],n,2)"
                />
            
              </column>
              <column>
                <img
                  :src="'data:image/png;base64,' + images[3 + 5 * (n - 1)]"
                  alt=""
                  style="width: 15%"
                  @click="select(params[3 + 5 * (n - 1)],n,3)"
                />
              
              </column>
              <column>
                <img
                  :src="'data:image/png;base64,' + images[4 + 5 * (n - 1)]"
                  alt=""
                  style="width: 15%"
                  @click="select(params[4 + 5 * (n - 1)],n,4)"
                />
               
              </column>
            </div>
          </columns>
        </div>
      </div>
      <div class="column is-half">
        <div style="margin: 10% 25% 0px 5%">
          <h1>选定人物编号{{col}}</h1>
          <h2>选定颜色编号{{man}}</h2>
           <img
                  :src="'data:image/png;base64,' + images[m + 5 * (n - 1)]"
                  alt=""
                  @click="select(params[m + 5 * (n - 1)])"
                />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Step1",
  data() {
    return {
      images: [],
      params: [],
      man:0,
      col:0,
      parm:[0,0],
      n:0,
      m:0,
    };
  },
  methods: {
    async select(col,n,m){
      this.man=await col[0];
      this.col=await col[1];
      this.n=await n;
      this.m=await m;
      this.parm[0]=this.man;
      this.parm[1]=this.col;
      console.log(col)
      localStorage.setItem("item",JSON.stringify(this.col))
      // localStorage.setItem('rows',JSON.stringify(cols))
      this.$emit('parent',this.parm)
    }
  },
  async beforeCreate() {
    let rows = [];
    let cols = [];
    for (let i = 1; i <= 5; i++) {
      rows.push(Math.round(Math.random() * 1000));
      cols.push(Math.round(Math.random() * 1000));
    }
    let res = await this.$http.post("/api/getImages", {
      rows,
      cols,
      styles: [0, 1, 2, 3, 4, 5, 6],
      steps: 0.6,
    });
    console.log(res);
    if (res.status != 200) {
      console.log(status);
    } else {
      this.images = res.data.images;
      this.params = res.data.params;
    }
  },
};
</script>
